<meta charset="UTF-8">
<div id="posi-report">
    <div class="demo-spin-container" v-if="queryLoading">
        <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>查询进度:{{idx}}/{{maxLen}}</div>
        </Spin>
    </div>
    <div class="demo-spin-container" v-if="isSpin">
        <Spin size="large" fix></Spin>
    </div>
    <div class="report-item-header">
        <Row style="margin:10px;height: 32px;">
            <div class="fl">
                <div style="height: 32px; line-height: 32px;">{{$t("reportForm.selectDev")}}:&nbsp;</div>
            </div>
            <div style="position: relative;width: 240px;" class="fl">
                <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                    <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" :placeholder="placeholder" @on-click="onClickIcon"></i-input>
                    <transition name="fade">
                        <div class="search-item-wrapper" v-show="isShowMatchDev">
                            <ul id="ztree" class="ztree"></ul>
                        </div>
                    </transition>
                </div>
            </div>
            <div style="margin-left:10px;" class="fl">
                {{$t("reportForm.selected")}}: <span v-text="selectedCount"></span>
            </div>
            <div style="padding-left: 10px;" class="fl">
                <span>{{$t("reportForm.selectTime")}}:</span>
                <date-picker type="daterange" :value="dateVal" :editable="false" :clearable="false" @on-change="onChange" show-week-numbers style="width:180px" placement="bottom-start"></date-picker>
            </div>
            <div style="height: 32px; line-height: 32px;margin-left: 10px;" class="spans-wrap fl">
                <span class="cursor-pointer" @click="handleSelectdDate(0)" :style="{color: dayNumberType == 0 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.toDay")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(1)" :style="{color: dayNumberType == 1 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(3)" :style="{color: dayNumberType == 3 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.threeDays")}}</span>
            </div>
            <div style="margin-left:10px;" class="fl">
                <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
            </div>
            <div style="margin-left:10px;" class="rt">
                <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
            </div>
        </Row>
        <div style="margin:10px;">
            <i-table ref="lastTable" :columns="lastPosiColumns" size="small" :height="lastTableHeight" :data="lastPosiData" :loading="loading"></i-table>
        </div>
        <Modal v-model="trackDetailModal" fullscreen>
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t("reportForm.AddressDetails")}}-{{deviceName}}</span>
            </p>
            <div>
                <i-table ref="totalTable" :columns="posiDetailColumns" :data="posiDetailData" :loading="loading" :height="posiDetailHeight"></i-table>
                <div class="my-page" style="margin: 5px 0;">
                    <Page :total="total" :page-size="pageSize" :current="currentIndex" @on-change="changePage"></Page>
                </div>
            </div>
            <div slot="footer" style="text-align: center;">
                <i-button style="width:160px;" type="primary" @click="getAllTracksAddress">{{$t("reportForm.queryAllAddress")}}</i-button>
                <i-button style="width:160px;" @click="exportDetailData" type="primary">{{$t("reportForm.exportData")}}</i-button>
                <i-button style="width:160px;" @click="trackDetailModal=false" type="primary">{{$t("monitor.confirm")}}</i-button>
            </div>
        </Modal>
        <transition name="fade">
            <div v-show="mapModal" class="posi-map-wraper">
                <div class="map-modal" @click="mapModal=false"></div>
                <div class="inner-map-wraper">
                    <div class="posi-map-title">
                        {{$t("reportForm.seePosi")}}
                        <div class="map-close"></div>
                    </div>
                    <div id="posi-map"></div>
                </div>
            </div>
        </transition>
    </div>
</div>